<template>
	<view class="tab-strip" >
	    <view v-for="(item,index) in tablist " :key="index" class="tab-strip-item">
	          <view class="tab-item " :class="[currentIndex==index ? 'active' :''] " 
	                    
											@click="tabClick(index)">
	                     <text>{{item}}</text> 
	          </view>
	    </view>
	 </view>
</template>

<script>
	export default {
		props:{
			tablist:Array,
		},
		data() {
			return {
				currentIndex:0,
			};
		},
		methods:{
			tabClick(index){
				this.currentIndex=index
				this.$emit('tabclick',this.currentIndex)
			}
		}
	}
</script>

<style lang="less">
.tab-strip{
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100upx;
	&-item{
		flex: 1;
	}
	text{
		line-height: 100upx;
	}
}
.tab-item{
  text-align: center;
  color: #555;
  justify-content: space-between;
  padding: 0px 46px;
}
.active{
	color: #2A8DF8;
	border-bottom: 4upx solid #2A8DF8;
}
.active text{
  padding-bottom: 12upx;
  font-weight: bold;
}
</style>
